<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<title></title>
		<meta name="description" content="overview & stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="static/css/bootstrap.min.css" rel="stylesheet" />
		<link href="static/css/bootstrap-responsive.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="static/css/font-awesome.min.css" />
		<link rel="stylesheet" href="static/css/ace.min.css" />
		<link rel="stylesheet" href="static/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="static/css/ace-skins.min.css" />
		<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>

<script type="text/javascript">
	$(top.hangge());	
	
	//新增
	function addmenu(){
		 top.jzts();
		 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="新增菜单";
		 diag.URL = '<%=basePath%>menu/toAdd.do';
		 diag.Width = 235;
		 diag.Height = 300;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	//修改
	function editmenu(menuId){
		 top.jzts();
	   	 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="编辑菜单";
		 diag.URL = '<%=basePath%>menu/toEdit.do?MENU_ID='+menuId;
		 diag.Width = 235;
		 diag.Height = 300;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	//编辑顶部菜单图标
	function editTb(menuId){
		 top.jzts();
	   	 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="编辑图标";
		 diag.URL = '<%=basePath%>menu/toEditicon.do?MENU_ID='+menuId;
		 diag.Width = 530;
		 diag.Height = 150;
		 diag.CancelEvent = function(){ //关闭事件
			if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
				top.jzts(); 
				setTimeout("location.reload()",100);
			}
			diag.close();
		 };
		 diag.show();
	}
	
	function delmenu(menuId,isParent){
		var flag = false;
		if(isParent){
			if(confirm("确定要删除该菜单吗？其下子菜单将一并删除！")){
				flag = true;
			}
		}else{
			if(confirm("确定要删除该菜单吗？")){
				flag = true;
			}
		}
		if(flag){
			top.jzts();
			var url = "<%=basePath%>menu/del.do?MENU_ID="+menuId+"&guid="+new Date().getTime();
			$.get(url,function(data){
				top.jzts();
				document.location.reload();
			});
		}
	}
	
	//一级菜单
	function openClose1(curObj){
		var html = "";
		if(curObj.length != 0){
			for(var i=0;i<curObj.length;i++){
				html += "<tr id='tr"+curObj[i].MENU_ID+"'>";
				html += "<td class='center'>"+i+1+"</td>";
				html += "<td class='center'>";
				if(curObj[i].CLASS_ID == 1){
					html += "我的";
				}
				if(curObj[i].CLASS_ID == 2){
					html += "OA";
				}
				if(curObj[i].CLASS_ID == 3){
					html += "项目";
				}
				html += "</td><td class='center'><i class='"+curObj[i].MENU_ICON+"'>&nbsp;</i>"+ curObj[i].MENU_NAME + "&nbsp;";
				if(curObj[i].MENU_TYPE == '1'){
					html += "<span class='label label-success arrowed'>系统</span>";
				}else{
					html += "<span class='label label-important arrowed-in'>业务</span>";
				}
				html += "</td>"+curObj[i].MENU_URL+"<td>";
				html += curObj[i].MENU_URL == '#'? '' : curObj[i].MENU_URL + "</td>"
				html += "<td class='center'>"+curObj[i].MENU_ORDER +"</td>";
				html += "<td style='width: 25%;'>";
				html += "<a class='btn btn-mini btn-warning'  id='open"+i+"' onclick= 'openClose2(\""+curObj[i].MENU_ID+"\","+i+")' >展开</a>";
				html += "&nbsp;<a class='btn btn-mini btn-purple' title='图标' onclick= 'editTb(\""+curObj[i].MENU_ID+"\")' ><i class='icon-picture'></i></a>";
				html += "&nbsp;<a class='btn btn-mini btn-info' title='编辑' onclick= 'editmenu(\""+curObj[i].MENU_ID+"\")' ><i class='icon-edit'></i></a>";
				html += "&nbsp;<a class='btn btn-mini btn-danger' title='删除'  onclick= 'delmenu(\""+curObj[i].MENU_ID+"\","+true+")'><i class='icon-trash'></i></a>";
				html += "</td></tr>";
			}
		}else{
			html = "<tr><td colspan='100'>没有相关数据</td></tr>";
		}
		return html;
	}
	
	//二级菜单
	function openClose2(menuId,trIndex){
		var curObj = "#open" + trIndex;
		var txt = $(curObj).text();
		if(txt=="展开"){
			$(curObj).text("折叠");
			$("#tr"+menuId).after("<tr id='tempTr"+menuId+"'><td colspan='5'>数据载入中</td></tr>");
			if(trIndex%2==0){
				$("#tempTr"+menuId).addClass("main_table_even");
			}
			var url = "<%=basePath%>menu/sub.do?MENU_ID="+menuId+"&guid="+new Date().getTime();
			$.get(url,function(data){
				if(data.length>0){
					var html = "";
					$.each(data,function(i){
						html = "<tr style='height:24px;line-height:24px;' id='tr1"+this.MENU_ID+"' name='subTr"+menuId+"'>";
						html += "<td></td>";
						html += "<td></td>";
						html += "<td><span style='width:80px;display:inline-block;'></span>";
						if(i==data.length-1)
							html += "<img src='static/images/joinbottom.gif' style='vertical-align: middle;'/>";
						else
							html += "<img src='static/images/join.gif' style='vertical-align: middle;'/>";
						html += "<span style='width:100px;text-align:left;display:inline-block;'>"+this.MENU_NAME+"</span>";
						html += "</td>";
						html += "<td>"+this.MENU_URL+"</td>";
						html += "<td class='center'>"+this.MENU_ORDER+"</td>";
						if(this.hasMenu){
							html += "<td><a class='btn btn-mini btn-warning' id='topen"+i+"' onclick='openClose3(\""+this.MENU_ID+"\","+i+")' >展开 </a>&nbsp;<a class='btn btn-mini btn-info' title='编辑' onclick='editmenu(\""+this.MENU_ID+"\")'><i class='icon-edit'></i></a> <a class='btn btn-mini btn-danger' title='删除' onclick='delmenu(\""+this.MENU_ID+"\",false)'><i class='icon-trash'></i></a></td>";
						}else{
							html += "<td><a class='btn btn-mini btn-info' title='编辑' onclick='editmenu(\""+this.MENU_ID+"\")'><i class='icon-edit'></i></a> <a class='btn btn-mini btn-danger' title='删除' onclick='delmenu(\""+this.MENU_ID+"\",false)'><i class='icon-trash'></i></a></td>";
						} 
						html += "</tr>";
						$("#tempTr"+menuId).before(html);
					});
					$("#tempTr"+menuId).remove();
					if(trIndex%2==0){
						$("tr[name='subTr"+menuId+"']").addClass("main_table_even");
					}
				}else{
					$("#tempTr"+menuId+" > td").html("没有相关数据");
				}
			},"json");
		}else{
			$("#tempTr"+menuId).remove();
			$("tr[name='subTr"+menuId+"']").remove();
			$(curObj).text("展开");
		}
	}
	
	//三级菜单
	function openClose3(menuId,trIndex){
		var curObj = "#topen" + trIndex;
		var txt = $(curObj).text();
		if(txt == "展开"){
			$(curObj).text("折叠");
			$("#tr1"+menuId).after("<tr id='tempTr1"+menuId+"'><td colspan='5'>数据载入中</td></tr>");
			if(trIndex%2==0){
				$("#tempTr1"+menuId).addClass("main_table_even");
			}
			var url = "<%=basePath%>menu/sub.do?MENU_ID="+menuId+"&guid="+new Date().getTime();
			$.get(url,function(data){
				if(data.length>0){
					var html = "";
					$.each(data,function(i){
						html = "<tr style='height:24px;line-height:24px;' name='subTr1"+menuId+"'>";
						html += "<td></td>";
						html += "<td></td>";
						html += "<td><span style='width:80px;display:inline-block;'></span>";
						if(i==data.length-1)
							html += "<img src='static/images/joinbottom.gif' style='vertical-align: middle;'/>";
						else
							html += "<img src='static/images/join.gif' style='vertical-align: middle;'/>";
						html += "<span style='width:100px;text-align:left;display:inline-block;'>"+this.MENU_NAME+"</span>";
						html += "</td>";
						html += "<td>"+this.MENU_URL+"</td>";
						html += "<td class='center'>"+this.MENU_ORDER+"</td>";
						html += "<td><a class='btn btn-mini btn-info' title='编辑' onclick='editmenu(\""+this.MENU_ID+"\")'><i class='icon-edit'></i></a> <a class='btn btn-mini btn-danger' title='删除' onclick='delmenu(\""+this.MENU_ID+"\",false)'><i class='icon-trash'></i></a></td>";
						html += "</tr>";
						$("#tempTr1"+menuId).before(html);
					});
					$("#tempTr1"+menuId).remove();
					if(trIndex%2==0){
						$("tr[name='subTr1"+menuId+"']").addClass("main_table_even");
					}
				}else{
					$("#tempTr1"+menuId+" > td").html("没有相关数据");
				}
			},"json");
		}else{
			$("#tempTr1"+menuId).remove();
			$("tr[name='subTr1"+menuId+"']").remove();
			$(curObj).text("展开");
		}
	}
	
	function filterType(type){
		var url = "<%=basePath%>menu/typelist.do?CLASS_ID="+type+"&guid="+new Date().getTime();
		$.get(url,function(data){
			$("#menuList").html("");
			var html = openClose1(data);
			$("#menuList").append(html);
		},"json");
	}
</script>
</head>

<body>
	<label style="float:left;padding-left: 20px;"><input name="category" id="category0" onclick="filterType(0);" type="radio"  checked="checked"><span class="lbl">全部</span></label>
	<label style="float:left;padding-left: 20px;"><input name="category" id="category1" onclick="filterType(1);" type="radio"><span class="lbl">我的</span></label>
	<label style="float:left;padding-left: 20px;"><input name="category" id="category2" onclick="filterType(2);" type="radio"><span class="lbl">云切</span></label>
	<label style="float:left;padding-left: 20px;"><input name="category" id="category3" onclick="filterType(3);" type="radio"><span class="lbl">云闻</span></label>
	<label style="float:left;padding-left: 20px;"><input name="category" id="category3" onclick="filterType(4);" type="radio"><span class="lbl">设置</span></label>
	<table id="table_report" class="table table-striped table-bordered table-hover">
		<thead>
		<tr>
			<th class="center"  style="width: 50px;">序号</th>
			<th class='center'>类别</th>
			<th class='center'>名称</th>
			<th class='center'>资源路径</th>
			<th class='center'>排序</th>
			<th class='center'>操作</th>
		</tr>
		</thead>
		<tbody id="menuList">
			<c:choose>
				<c:when test="${not empty menuList}">
					<c:forEach items="${menuList}" var="menu" varStatus="vs">
					<tr id="tr${menu.MENU_ID }">
					<td class="center">${vs.index+1}</td>
					<td class="center">
						<c:if test="${menu.CLASS_ID == 1 }">
						我的
						</c:if>
						<c:if test="${menu.CLASS_ID == 2 }">
						OA
						</c:if>
						<c:if test="${menu.CLASS_ID == 3 }">
						项目
						</c:if>
					</td>
					<td class='center'><i class="${menu.MENU_ICON }">&nbsp;</i>${menu.MENU_NAME }&nbsp;
						<c:if test="${menu.MENU_TYPE == '1' }">
						<span class="label label-success arrowed">系统</span>
						</c:if>
						<c:if test="${menu.MENU_TYPE != '1' }">
						<span class="label label-important arrowed-in">业务</span>
						</c:if>
					</td>
					<td>${menu.MENU_URL == '#'? '': menu.MENU_URL}</td>
					<td class='center'>${menu.MENU_ORDER }</td>
					<td style="width: 25%;">
					<a class='btn btn-mini btn-warning' id="open${vs.index }" onclick="openClose2('${menu.MENU_ID }',${vs.index })" >展开</a>
					<a class='btn btn-mini btn-purple' title="图标" onclick="editTb('${menu.MENU_ID }')" ><i class='icon-picture'></i></a>
					<a class='btn btn-mini btn-info' title="编辑" onclick="editmenu('${menu.MENU_ID }')" ><i class='icon-edit'></i></a>
					<a class='btn btn-mini btn-danger' title="删除"  onclick="delmenu('${menu.MENU_ID }',true)"><i class='icon-trash'></i></a>
					</tr>
					</c:forEach>
				</c:when>
				<c:otherwise>
					<tr>
					<td colspan="100">没有相关数据</td>
					</tr>
				</c:otherwise>
			</c:choose>
		</tbody>
	</table>
	
	<div class="page_and_btn">
		<div>
			&nbsp;&nbsp;<a class="btn btn-small btn-success" onclick="addmenu();">新增</a>
		</div>
	</div>
	
</body>
</html>